<template>
  <div class="shopping-cat-wrapper">
    <div class="panel" v-for="item in list" :key="item.id">
      <div class="select">
        <i class="icon icon-checkmark"
           :class="{'icon-checkmark':item.select === true,'icon-checkmark2':item.select === false}"
           @click="selectShoppingCat(item.id)" v-if="!isEditor"></i>
        <i class="icon icon-bin" @click="delShoppingCat({id:item.id,status:0})" v-if="isEditor"></i>
      </div>
      <div class="good-box">
        <div class="img">
          <img :src="item.img">
        </div>
        <div class="con">
          <div class="tit">{{item.title}}</div>
          <div class="info"><span>{{item.info}}</span></div>
          <div class="operation">
            <span class="price">￥<em>{{item.price}}</em></span>
            <span class="num"><cartControl :goods="{num:item.num,id:item.id}" @addGoods="addGoods" @desCartGoods="desCartGoods"></cartControl></span>
          </div>
        </div>
      </div>
    </div>
    <div class="empty" v-if="!list.length && !isLoading">
      <div class="ts">挑选商品添加到购物车，点结算就可以下单啦</div>
      <i class="icon icon-cart"></i>购物车空空如也
    </div>
  </div>
</template>

<script>
  import cartControl from '@/components/cart-control/cart-control';
  export default {
    props: {
      list: Array,
      isLoading:Boolean,
      isEditor:Boolean
    },
    name: '',
    data() {
      return {}
    },
    methods: {
      selectShoppingCat(id) {
        this.$emit('selectShoppingCat',id);
      },
      delShoppingCat(params) {
        this.$emit('delShoppingCat',params);
      },
      addGoods(id) {
        this.$emit('addGoods',id);
      },
      desCartGoods (id) {
        this.$emit('delShoppingCat',{id:id,status:1});
      },
    },
    components:{
      cartControl
    }
  }
</script>

<style scoped lang="less">
  @import '../../common/less/variable';
  .shopping-cat-wrapper{
    .empty{
      margin-top: 50%;
      text-align: center;
      .ts{
        padding: 20px 0;
        font-size: @font-size-medium;
      }
      .icon{
        margin-right: 10px;
      }
    }
    .panel{
      height: 110px;
      display: flex;
      margin: 10px 0;
      align-items:center;
      background-color: @color-background-l;
      .select{
        width: 25px;
        text-align: center;
        align-items:center;
        padding-left: 10px;
        .icon{
          color: @color-text-t;
        }
        .icon-checkmark2{
          color: @color-text-h;
        }
      }
      .good-box{
        background-color: @color-background-l;
        flex: 1;
        display: flex;
        padding: 10px;
        //box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        .img{
          width: 90px;
          height: 90px;
          img{
            width:100%;
            height: 100%;
          }
        }
        .con{
          flex: 1;
          padding:0 10px;
          .tit{
            font-size: @font-size-medium;
            line-height: 1.4em;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            height: 36px;
            -webkit-box-orient: vertical;
          }
          .info{
            padding: 5px 0;
            font-size: @font-size-small;
            color: @color-text-h;
            span{
              padding-right: 5px;
            }
          }
          .operation{
            display: flex;
            justify-content: space-between;
            height: 30px;
            line-height: 30px;
            .price{
              color: @color-text-t;
              font-size: @font-size-small;
              em{
                font-size: @font-size-large;
                font-style: normal;
                font-weight: bold;
              }
            }
            .num{

            }
            .icon{
              color: @color-theme;
            }
          }
        }
      }
    }
  }
</style>
